<!--
 * @Descripttion: 
 * @Version: 
 * @Author: gaohj
 * @Date: 2022-11-10 18:29:16
 * @LastEditors: Please set LastEditors
 * @LastEditTime: 2022-11-11 10:03:12
-->

<!DOCTYPE html>
<html>

<head>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
	<title>作业</title>
	<script type="text/javascript">
		// 排序  
		// 升序 降序  sort() 冒泡 选择  
		// 奇数次 降序  偶数次升序  

		// 元素的交换  不能跟数组一样  replaceChild() 交换的双方必须是节点 


		// 判定你是奇数次 还是偶数次 
		// 找到对比的条件  

		// 冒泡排序 
		var nameTimes = 0;
		var ageTimes = 0;
		var mailTimes = 0;
		function sortByName() {
			//获取元素  
			var tbody = document.getElementsByTagName('tbody')[0];
			var trs = tbody.getElementsByTagName('tr');
			// console.log(trs);
			// console.log(trs[0].getElementsByTagName('td')[0].innerText >
			// 	trs[1].getElementsByTagName('td')[0].innerText);
			//冒泡 
				for(var i=0;i<trs.length-1;i++){
					for(var j=0;j<trs.length-1-i;j++){
						// 条件
						//如果奇数次降序 
						if(nameTimes % 2 ==0){
							// 根据每一行的第一列的值跟下一行的第一列进行对比

							if(trs[j].getElementsByTagName('td')[0].innerText > 
							trs[j+1].getElementsByTagName('td')[0].innerText){
								//交换
								swap(trs[j],trs[j+1]);
							}
						}else{
							if(trs[j].getElementsByTagName('td')[0].innerText < 
							trs[j+1].getElementsByTagName('td')[0].innerText){
							//交换 
								swap(trs[j],trs[j+1]);
							}
						}
						//如果偶数次升序
					}
				}
				nameTimes++;
		}

		function sortByAge() {
			//获取元素  
			var tbody = document.getElementsByTagName('tbody')[0];
			var trs = tbody.getElementsByTagName('tr');
			// console.log(trs);
			// console.log(trs[0].getElementsByTagName('td')[0].innerText >
			// 	trs[1].getElementsByTagName('td')[0].innerText);
			//冒泡 
				for(var i=0;i<trs.length-1;i++){
					for(var j=0;j<trs.length-1-i;j++){
						// 条件
						//如果奇数次降序 
						if(ageTimes % 2 ==0){
							// 根据每一行的第一列的值跟下一行的第一列进行对比

							if(parseInt(trs[j].getElementsByTagName('td')[1].innerText) > 
							parseInt(trs[j+1].getElementsByTagName('td')[1].innerText)){
								//交换
								swap(trs[j],trs[j+1]);
							}
						}else{
							if(parseInt(trs[j].getElementsByTagName('td')[1].innerText) < 
							parseInt(trs[j+1].getElementsByTagName('td')[1].innerText)){
								//交换 
								swap(trs[j],trs[j+1]);
							}
							
						}
						//如果偶数次升序
					}
				}
				ageTimes++;
		}

		function sortByEmail() {
			//获取元素  
			var tbody = document.getElementsByTagName('tbody')[0];
			var trs = tbody.getElementsByTagName('tr');
			// console.log(trs);
			// console.log(trs[0].getElementsByTagName('td')[0].innerText >
			// 	trs[1].getElementsByTagName('td')[0].innerText);
			//冒泡 
				for(var i=0;i<trs.length-1;i++){
					for(var j=0;j<trs.length-1-i;j++){
						// 条件
						//如果奇数次降序 
						if(mailTimes % 2 ==0){
							// 根据每一行的第一列的值跟下一行的第一列进行对比

							if(trs[j].getElementsByTagName('td')[2].innerText > 
							trs[j+1].getElementsByTagName('td')[2].innerText){
								//交换
								swap(trs[j],trs[j+1]);
							}
						}else{
							if(trs[j].getElementsByTagName('td')[2].innerText < 
							trs[j+1].getElementsByTagName('td')[2].innerText){
							//交换 
								swap(trs[j],trs[j+1]);
							}
						}
						//如果偶数次升序
					}
				}
				mailTimes++;
		}
		// temp   y
		// y      x
		// x      temp
		function swap(x,y){
			var temp = x.cloneNode(true);
			y.parentNode.replaceChild(temp,y);
			x.parentNode.replaceChild(y,x);
			temp.parentNode.replaceChild(x,temp);



		}
	</script>
</head>

<body>
	<table width="60%" border="1" cellspacing="0" cellpadding="5" align="center">
		<thead>
			<tr>
				<th><a href="javascript:sortByName()">姓名</a></th>
				<th><a href="javascript:sortByAge()">年龄</a></th>
				<th><a href="javascript:sortByEmail()">邮箱</a></th>
			</tr>
		</thead>
		<tbody>
			<tr>
				<td>cc</td>
				<td>27</td>
				<td>cc@gmail.com</td>
			</tr>
			<tr>
				<td>ff</td>
				<td>18</td>
				<td>ff@163.com</td>
			</tr>
			<tr>
				<td>ee</td>
				<td>18</td>
				<td>ee@sina.com.cn</td>
			</tr>
			<tr>
				<td>dd</td>
				<td>8</td>
				<td>dd@qq.com</td>
			</tr>
			<tr>
				<td>aa</td>
				<td>22</td>
				<td>aa@hotmail.com</td>
			</tr>
		</tbody>
	</table>
</body>

</html>